<script setup lang="ts">
import VueEcharts from 'vue-echarts'
import type { QuerySangitaChartsResult } from '../composable'
import type { VChartInstance } from '@/types'
import { useChartAutoResize } from '@/mixins/MixinChartAutoResize'

const props = defineProps<{
  data: QuerySangitaChartsResult
  modelName: string
}>()
const designStore = useDesignStore()
const option = computed(() => {
  return {
    title: {
      text: `${props.modelName}分解`,
      textStyle: {
        fontSize: 16,
        fontWeight: 'normal',
      },
      left: 20,
      top: 20,
    },
    tooltip: {
      trigger: 'item',
      triggerOn: 'mousemove',
      formatter(params: any) {
        return `${params.name}: ${Number.parseFloat(params.value).toFixed(2)}` // 保留两位小数
      },
    },
    series: [
      {
        type: 'sankey',
        layout: 'none',
        draggable: false,
        left: 140,
        right: 140,
        bottom: 60,
        top: 60,
        emphasis: {},
        data: [
          ...props.data.nodes.map((v) => {
            return {
              name: v,
            }
          }),
        ],
        links: [
          ...props.data.links,
        ],
        lineStyle: {
          // color: 'gradient',
          color: '#87f7cf',
          opacity: 0.1,
          curveness: 0.5,
        },
      },
    ],
  }
})

const chartRef = ref<VChartInstance>()

useChartAutoResize(chartRef)
</script>

<template>
  <VueEcharts ref="chartRef" :option="option" :theme="designStore.theme" />
</template>
